<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生(学科)</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui/css/bootstrap.css">
    <link rel="stylesheet" href="../layui/css/personal.css">
</head>
<body>
<section class="layui-larry-box">
    <div class="larry-personal">
        <blockquote class="layui-elem-quote layui-text">
            <!--<header class="larry-personal-tit">-->
            <span>我的课程</span>
            <!--</header>&lt;!&ndash; /header &ndash;&gt;-->
        </blockquote>
        <form class="layui-form col-lg-5 " action="" method="get" lay-filter="form">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">科目类别：</label>
                    <div class="layui-input-block">
                        <select name="lesson"  id="lesson" lay-filter="lessonname">
                            <option  value="" ></option>
                        </select>
                    </div>
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">添加方式：</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <select name="type"  id="type" lay-filter="type">-->
<!--                            <option  value="oneinsert" >单个插入</option>-->
<!--                            <option  value="moreinsert">批量插入</option>-->
<!--                        </select>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">插入方式：</label>
                <div class="layui-input-block">
                    <input type="radio"  name="type" value="one" lay-filter="type" title="单个插入" checked="" >
                    <input type="radio"  name="type" value="more" lay-filter="type" title="批量导入">

                </div>
            </div>
            <div class="layui-form-item" id="oneadd"  >
                <div class="layui-inline">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="studentid"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">(花名册)序号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="studentno"  autocomplete="off" class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item" id="moreadd" style="display: none" >
                <div class="layui-inline">
                    <label class="layui-form-label">起始学号</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="startid"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">截至学号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endid"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">起始序号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startno"  autocomplete="off" class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>

        <div class="larry-personal-body clearfix">
<!--            UI填充造成视觉的效果！-->
        </div>
        <div class="larry-personal-body clearfix">
            <table class="layui-hide"  id="demo" lay-filter="demo"></table>
        </div>
    </div>
</section>

</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">右侧进行筛选导出</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../layui/jquery-2.2.1.min.js"></script>
<script type="text/javascript" >
    function renderForm(){
        layui.use('form', function(){
            var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
            form.render();
        });
    }

    function showstudent() {
        var lesson=$("#lesson").val();
        console.log(lesson);
        layui.use('table', function(){
            var table = layui.table;//高版本建议把括号去掉，有的低版本，需要加()
            var name=$("#lesson").find("option:selected").text()+$("#job").find("option:selected").text();
            console.log(name);
            table.render({
                elem: '#demo'
                ,url: 'getstudentattendlesson' //数据接口
                ,where:{'classid':$("#lesson").val()}
                ,page: false //开启分页
                ,toolbar: '#toolbarDemo'
                ,title:name
                ,cols: [[ //表头
                    {field: 'id', title: 'ID',  sort: true, fixed: 'left',width:120}
                    ,{field: 'name', title: '姓名'}
                    ,{field:'pinyin',title:'pinyin'}
                    ,{field: 'classid', title: '班级代号'}
                    ,{field: 'studentno', title: '学号',sort: true}
                    ,{field: 'no', title: '编号',edit:'text',sort:true}
                   ,{field: 'note', title: '备注',edit:'text'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
            });
            //头工具栏事件

            //监听单元格编辑
            table.on('edit(demo)', function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,fieldva = obj.field; //得到字段

                console.log('[ID: '+ data.scoreid +'] ' + fieldva + ' 字段更改为：'+ value);
                $.ajax( {
                    url:"updatestudentclass",
                    data:{
                        'studentclassid':data.id,
                        'no':data.no,
                        'note':data.note,
                    },

                    method:'POST',
                    success:function (msg) {
                        layer.msg(msg)
                    },
                    error:function (msg) {
                        layer.msg(msg)
                    }

                })
            });
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:'deletestuclassbyid',
                            data: {
                                'studentclassid':data.id,
                            },
                            method:'POST',
                            traditional: true,
                            success:function (msg) {
                                layer.msg(msg);
                                obj.del();
                            },
                            error:function (msg) {
                                layer.msg(msg)
                            }



                        })
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.msg(JSON.stringify("您可直接编辑编号和备注"))
                }
            });
        });

    }

    function filllesson(json) {
        $("#lesson").empty();
        for (var i=0;i<json.length;i++)
        {
            $("#lesson").append(" <option value=\""+json[i].id+"\">"+json[i].coursename+"</option>");
            console.log(json[i].title)
        }
        renderForm();
    }
    function getteachclass()
    {
        // $("#lessonname").empty();
        var id=$("#lesson").val();
        $.ajax({
            url: "getteacherclassthisterm",
            type: "GET",
            traditional: true,//这里设置为true
            success: function(data) {
                //do sth...
                filllesson(data);
                showstudent();
            }
        });
    }

    function reflash(data) {

        if(data=='one')
        {
            $("#oneadd").css("display","");
            $("#moreadd").css("display","none");

        }
        else
        {
            $("#oneadd").css("display","none");
            $("#moreadd").css("display","");
        }
    }

    getteachclass();


    layui.use(['form', 'layedit', 'laydate','table'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , table = layui.table
            , laydate = layui.laydate;
        form.on('select(lessonname)', function(data){
            showstudent();
        });
        form.on('submit(submit)',function(data){
            layer.confirm('真的添加么?', function(index) {
                layer.msg(JSON.stringify("正在插入,请稍等"));
                $.ajax({
                    url: 'lessonaddstudent',
                    method: 'POST',
                    traditional: true,
                    data: data.field,
                    success: function (msg) {
                        layer.msg(msg);
                        showstudent();
                    },
                    error: function (msg) {
                        layer.msg(msg);
                    }

                });
                layer.close(index);

            });
            return false;
        });
        form.on('radio(type)',function (data) {
           reflash(data.value);
        });
    })
</script>
</html>